<template>
	<view class="box">
		<view class="userinfo">
			<view class="userinfo_top">
				<view class="userinfo_top_name">
					<view class="top_avatar">
						<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/avatar_1.png" draggable="false">
						</image>
					</view>
					<view class="top_name">
						<text class="top_name_nickname">微信昵称</text>
						<text class="top_user_phone">133****1202</text>
					</view>
					<view class="top_icon">
						<u-icon name="scan" size="52rpx" color="#000" @click="callScan"></u-icon>
						<u-icon name="setting" size="52rpx" color="#000"
							@click="$Router.push('/pages/setting/setting')"></u-icon>
						<u-icon name="bell" size="52rpx" color="#000"
							@click="$Router.pushTab('/pages/home/notice/notice')"></u-icon>
					</view>

				</view>

				<view class="money_box">
					<view class="money_item yknumber" @click="goToUrl('/pages/pay/charge')">
						<!-- <view class="money_item_tip">可充值</view> -->
						<text>余额</text>
						<text>7,008.90</text>
					</view>
					<view class="money_item yknumber" @click="goToUrl('/pages/user/point/pointList')">
						<text>积分</text>
						<text>2000</text>
					</view>
					<view class="money_item yknumber" @click="goToUrl('/pages/user/tickets')">
						<!-- <view class="money_item_tip">可提现</view> -->
						<text>优惠券</text>
						<text>50</text>
					</view>
				</view>

			</view>
			<view class="userinfo_invite">
				<view class="top">
					<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/king.png" draggable="false">
					</image><text>普卡</text><text>无折扣</text>
					<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/ewm.png" draggable="false">
					</image>
				</view>

			</view>
			<view class="userinfo_body">
				<!-- <view class="userinfo_order">
					<view class="order_box">
						<view class="order_box_title">
							<view>我的订单</view>
							<view @click="goToUrl('/pages/orders/orders')"><text>查看全部</text>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view class="order_box_body">
							<view class="order_item">
								<view class="order_item_logo">

									<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/order_icon_1.png"
										draggable="false">
									</image>
								</view><text><text>待付款</text></text>
							</view>
							<view class="order_item">
								<view class="order_item_logo">

									<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/order_icon_2.png"
										draggable="false">
									</image><text data-v-55cfca04="" class="u-badge u-badge--not-dot u-badge--error"
										style="color: rgb(255, 255, 255); position: absolute; top: -2px; right: -5px;"><text>3</text></text>
								</view><text><text>待发货</text></text>
							</view>
							<view class="order_item">
								<view class="order_item_logo">

									<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/order_icon_3.png"
										draggable="false">
									</image>
								</view><text><text>待收货</text></text>
							</view>
							<view class="order_item">
								<view class="order_item_logo">

									<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/order_icon_4.png"
										draggable="false">
									</image><text data-v-55cfca04="" class="u-badge u-badge--not-dot u-badge--error"
										style="color: rgb(255, 255, 255); position: absolute; top: -2px; right: -5px;"><text>1</text></text>
								</view><text><text>待评价</text></text>
							</view>
							<view class="order_item">
								<view class="order_item_logo">

									<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/order_icon_5.png"
										draggable="false">
									</image>
								</view><text><text>售后</text></text>
							</view>
						</view>
					</view>
				</view> -->
				<view class="userinfo_part">
					<view class="part_title">
						<view>我的服务</view>
					</view>
					<view class="part_body">
						<view class="part_item" @click="goToUrl('/pages/user/billList')">
							<view class="part_item_img">
								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/tool_3.png"
									draggable="false">
								</image>
							</view><text>加醇记录</text>
						</view>
						<view class="part_item" @click="goToUrl('/pages/orders/orders')">
							<view class="part_item_img">
								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/tool_3.png"
									draggable="false">
								</image>
							</view><text>订单</text>
						</view>
						<view class="part_item" @click="goToUrl('/pages/user/carplate')">
							<view class="part_item_img">
								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/tool_3.png"
									draggable="false">
								</image>
							</view><text>车牌</text>
						</view>
						<view class="part_item" @click="goToUrl('/pages/user/cargroup')">
							<view class="part_item_img">
								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/tool_3.png"
									draggable="false">
								</image>
							</view><text>车队</text>
						</view>
						<view class="part_item">
							<view class="part_item_img">
								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/tool_4.png"
									draggable="false">
								</image>
							</view><text>申请代理</text>
						</view>
						<!-- <view class="part_item" @click="goToUrl('')">
							<view class="part_item_img">
								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/tool_4.png"
									mode="aspectFill"></image>
							</view>
							<text>代理中心</text>
						</view> -->

						<view class="part_item" @click="goToUrl('/pages/agent/agentCenter')">
							<view class="part_item_img">
								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/tool_3.png"
									draggable="false">
								</image>
							</view><text>代理中心</text>
						</view>
					</view>
				</view>
				<view class="userinfo_part">
					<view class="part_body footer_body">
						<view class="part_item" style="flex: 1 1 0%;">
							<view class="part_item_img">


								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/footer_1.png"
									draggable="false">
								</image>
							</view><text><text>客服中心</text></text>
						</view>
						<!-- <view class="part_item" style="flex: 1 1 0%;">
							<view class="part_item_img">


								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/footer_3.png"
									draggable="false">
								</image>
							</view><text><text>地址管理</text></text>
						</view> -->
						<view class="part_item" style="flex: 1 1 0%;" @click="goToUrl('/pages/user/feedback')">
							<view class="part_item_img">


								<image src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/footer_4.png"
									draggable="false">
								</image>
							</view><text><text>意见反馈</text></text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {
		callScan() {
			uni.scanCode({
				success: function (res) {
					console.log("条码类型：" + res.scanType);
					console.log("条码内容：" + res.result);
				},
			});
		},
	}
}


</script>

<style scoped lang="scss">
.userinfo {
	width: 100%;

	.user_info_navbar {
		width: 100%;
		// height: 100rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		height: 100rpx;
		// background-color: #fff;
	}

	.userinfo_top {
		width: 100%;
		padding-bottom: 40rpx;
		// min-height: 167px;
		padding-top: 20px;
		// background: linear-gradient(180deg, #3A61ED 0%, #5656F1 100%);

		.userinfo_top_name {
			@include flex-center(row, flex-start, center);
			padding: 0 30rpx;

			.top_avatar {
				position: relative;
				width: 110rpx;
				height: 110rpx;
				margin-right: 20rpx;

				>image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					border: 2rpx solid transparent;
					border-color: rgba(255, 255, 255, 0.5);
				}

				>text {
					max-width: 110rpx;
					min-width: 84rpx;
					height: 36rpx;
					@include flex-center(row, center, center);
					text-align: center;
					font-weight: bold;
					font-size: 20rpx;
					padding: 0 10rpx;
					color: #fff;
					background: #f99e8d;
					border-radius: 40rpx;
					position: absolute;
					bottom: -15rpx;
					left: 0;
					right: 0;
					white-space: nowrap;
				}
			}

			.top_name {
				flex: 1;
				@include flex-center(column, center, flex-start);

				.top_name_editname {
					@include flex-center(row, flex-start, center);
					font-size: 34rpx;
					line-height: 60rpx;
					font-weight: bold;

					.nicknamepop {
						width: 600rpx;
						padding: 30rpx 30rpx 0 30rpx;
						@include flex-center(column, center, center);
						border-radius: 20rpx;
						overflow: hidden;
						background-color: #fff;

						.pop_title {
							font-size: 36rpx;
							color: #323233;
							margin-bottom: 30rpx;
						}

						.pop_btn {
							width: 100%;
							height: 90rpx;
							margin-top: 30rpx;
							border-top: 2rpx solid #f3f3f3;
							@include flex-center(row, space-between, center);

							>view {
								font-size: 32rpx;
								width: 50%;
								@include flex-center(row, center, center);
								text-align: center;
							}

							>view:nth-of-type(1) {
								color: #323233;
								border-right: 2rpx solid #f3f3f3;
							}

							>view:nth-of-type(2) {
								color: #ee0a24;
							}
						}
					}
				}

				.top_name_nickname {
					font-size: 32rpx;
					line-height: 60rpx;
					font-weight: bold;
					@include line_overflow(360rpx);
				}

				.top_user_phone {
					font-size: 24rpx;
				}

				.top_name_username {
					font-size: 24rpx;
				}

				.top_name_tjr {
					font-size: 20rpx;
					background: #ffffff;
					padding: 0 16rpx;
					border-radius: 12rpx;
					height: 36rpx;
					line-height: 38rpx;
					margin-top: 6rpx;
					color: rgba(0, 0, 0, 0.7);
				}
			}

			.rec_button {
				font-size: 20rpx;
				display: inline-block;
				border: 1px solid #f34455;
				border-radius: 20rpx;
				padding: 0 10rpx;
				color: #f34455;
				margin-top: 10rpx;
			}

			.top_icon {
				align-self: flex-start;
				@include flex-center(row, flex-start, center);

				>view {
					margin-left: 15rpx;
				}
			}
		}




		.money_box {

			@include flex-center(row, space-between, center);
			padding-top: 65rpx;
			padding: 20rpx;


			.money_item {
				width: 200rpx;
				height: 120rpx;
				@include flex-center(column, center, center);
				position: relative;
				// background: linear-gradient(to right, #FFC300 0%, #FF8F1F);
				padding: 10rpx;
				border-radius: 10rpx;

				// &:nth-of-type(2) {
				// 	background: linear-gradient(to right, #fd6c51, #f34455);
				// }

				// &:nth-of-type(3) {
				// 	background: linear-gradient(to right, #fd6c51, #f34455);
				// }

				.money_item_tip {
					position: absolute;
					top: -30rpx;
					left: 50%;
					font-size: 18rpx;
					padding: 0 16rpx;
					white-space: nowrap;
					font-weight: normal;
					background: linear-gradient(to right, #fd6c51, #f34455);
					color: #ffffff;
					height: 28rpx;
					line-height: 28rpx;
					border-radius: 16rpx;

					&:before {
						content: "";
						width: 0px;
						height: 0px;
						border-top: 6rpx solid #fd6c51;
						border-right: 14rpx solid transparent;
						position: absolute;
						top: 28rpx;
						left: 14rpx;
					}
				}

				>text:nth-of-type(1) {
					font-size: 24rpx;
					padding: 0 16rpx;
					font-weight: 500;
					line-height: 36rpx;
				}

				>text:nth-of-type(2) {
					font-size: 34rpx;
					line-height: 1;
					padding-top: 10rpx;
				}
			}
		}

	}

	.userinfo_invite {
		// width: 700rpx;
		margin: -40rpx 20rpx 0 20rpx;
		height: 340rpx;
		border-radius: 24rpx;
		padding: 0 28rpx;
		background-image: url(https://inexweb.oss-cn-shenzhen.aliyuncs.com/show/resource/image/default/202204/4a2ce76f1b65e45e9b7d0faaf9478aaf.jpg);
		background: #25222b;

		.top {
			padding-top: 40rpx;
			@include flex-center(row, flex-start, center);

			>text {
				font-size: 24rpx;
				color: #ffc781;
			}

			>image:nth-of-type(1) {
				width: 40rpx;
				height: 38rpx;
				margin-right: 15rpx;
			}

			>image:nth-of-type(2) {
				width: 30rpx;
				height: 30rpx;
				margin-left: auto;
			}
		}

	}

	.userinfo_body {
		// width: 100%;
		padding: 0 20rpx 50rpx 20rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.userinfo_order {
		// width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.order_top {
			width: 100%;
			padding: 15rpx 0;
			@include flex-center(row, space-between, center);
			border-bottom: 1px solid #f2f2f2;

			.order_top_item {
				flex: 1;
				@include flex-center(row, center, center);
				border-right: 2rpx solid #f2f2f2;

				>text {
					font-size: 26rpx;
					font-weight: 500;
					margin-left: 5rpx;
					color: #2f2f2f;
				}
			}

			.order_top_item:last-of-type {
				border-right: none;
			}
		}

		.order_box {

			// width: 100%;
			.order_box_title {
				// width: 100%;
				padding: 20rpx;
				@include flex-center(row, space-between, center);

				>view:nth-of-type(1) {
					font-size: 30rpx;
					color: #000;
					font-weight: 500;
				}

				>view:nth-of-type(2) {
					color: #999;
					@include flex-center(row, center, center);

					text {
						font-size: 26rpx;
						margin-right: 5rpx;
					}
				}
			}

			.order_box_body {
				// width: 100%;
				@include flex-center(row, flex-start, center, wrap);
				padding-bottom: 10rpx;

				.order_item {
					width: 20%;
					margin: 10rpx 0;
					@include flex-center(column, center, center);

					.order_item_logo {
						position: relative;

						>image {
							width: 52rpx;
							height: 52rpx;
						}
					}

					>text {
						width: 100%;
						font-size: 24rpx;
						color: #393939;
						text-align: center;
						margin-top: 5rpx;
					}
				}
			}
		}
	}

	.userinfo_part {
		// width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.part_title {
			// width: 100%;
			padding: 20rpx;
			border-bottom: 1px solid #f6f6f6;
			@include flex-center(row, space-between, center);

			>view:nth-of-type(1) {
				font-size: 30rpx;
				font-weight: 500;
				color: #000;
			}

			>view:nth-of-type(2) {
				color: #999;
				@include flex-center(row, center, center);

				text {
					font-size: 26rpx;
					margin-right: 5rpx;
				}
			}
		}

		.part_body {
			// width: 100%;
			@include flex-center(row, flex-start, center, wrap);
			padding: 10rpx 0;

			.part_item {
				width: 25%;
				margin: 10rpx 0;
				@include flex-center(column, center, center);

				.part_item_img {
					position: relative;

					>image {
						width: 75rpx;
						height: 75rpx;
						border-radius: 50%;
					}
				}

				>text {
					width: 100%;
					font-size: 24rpx;
					color: #393939;
					text-align: center;
				}
			}

			button {
				background: transparent;
				padding: 0;
				line-height: normal;

				.part_item_img {
					@include flex-center(row, center, center);
				}
			}

			button::after {
				border: none;
			}

			uni-button {
				background: transparent;
				padding: 0;
				line-height: normal;

				.part_item_img {
					@include flex-center(row, center, center);
				}
			}

			uni-button::after {
				border: none;
			}
		}

		.market_body {
			// width: 100%;
			padding: 10px;

			.market_top {
				width: 100%;
				background: #fbf7eb;
				padding: 28rpx 24rpx;
				border-radius: 12rpx;
				color: #b48956;
				@include flex-center(row, space-between, center);

				>view:nth-of-type(1) {
					@include flex-center(column, center, flex-start);

					>text:nth-of-type(1) {
						font-size: 32rpx;
						font-weight: 500;
					}

					>text:nth-of-type(2) {
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}

				>view:nth-of-type(2) {
					align-self: flex-end;

					>view {
						border-radius: 40rpx;
						padding: 8rpx 32rpx;
						color: #ffffff;
						font-size: 24rpx;
						background: linear-gradient(to bottom, #f8cf63, #fca838);
					}
				}
			}

			.market_bottom {
				width: 100%;
				@include flex-center(row, space-between, center);
				margin-top: 20rpx;

				.market_bottom_item:nth-of-type(1) {
					background: url(https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/market_1.png) #fbf7eb no-repeat;
					background-position: bottom right;
					background-size: 32%;
					margin-right: 12rpx;
				}

				.market_bottom_item:nth-of-type(2) {
					background: url(https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/user/market_2.png) #fbf7eb no-repeat;
					background-position: bottom right;
					background-size: 32%;
					margin-left: 12rpx;
				}

				.market_bottom_item {
					// width: 41.5%;
					flex: 1;
					padding: 28rpx 24rpx;
					background: #fbf7eb;
					border-radius: 12rpx;
					color: #b48956;
					@include flex-center(column, center, flex-start);

					>text:nth-of-type(1) {
						font-size: 32rpx;
						font-weight: 600;
					}

					>text:nth-of-type(2) {
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}

	.footer_body {
		.part_item_img {
			image {
				width: 50rpx !important;
				height: 50rpx !important;
				border-radius: 0 !important;
			}
		}
	}

	.userinfo_recommend {}
}
</style>
